<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        p>span {
            display: inline-block;
            width: 70px;
        }

        .title {
            display: flex;
        }

        .title>li {
            width: 30px;
        }

        #date {
            width: 210px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        #date>li {
            width: 30px;

        }

        #yue {
            margin: 10px;
        }

        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div class="data">
        <p>
            <span id="prev">上一月</span>
            <span id="nian">2022</span>
            <span id="next">下一月</span>
        </p>
    </div>
    <h5 id="yue">一月</h5>
    <ul class="title">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
    </ul>
    <ul id="date"></ul>
    <script>
        let date = new Date();
        add();//当页面第一次加载时进入渲染

        function add() {
           
            let cYear = date.getFullYear();
            let cMonth = date.getMonth();
            let cDay = date.getDate();//当前的天

            //每个月第一天是周几
            let zhou = new Date(cYear, cMonth, 1).getDay();

            //获取每个月天数
            let days = new Date(cYear, cMonth + 1, -1).getDate() + 1;
            let arr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
            document.getElementById("yue").innerHTML = arr[cMonth];
            document.getElementById("nian").innerHTML = cYear;
            let html = '';
            for (var i = 0; i < zhou; i++) {
                html += '<li></li>';
            }
            for (var i = 1; i <= days; i++) {
                if (i == cDay) {
                    html += '<li class="active">' + i + '</li>';
                }
                else {
                    html += '<li>' + i + '</li>';
                }
            }
            document.getElementById("date").innerHTML = html;
        }
        document.getElementById("prev").onclick = function () {
            date.setMonth(date.getMonth() - 1);
            add();
        };
        document.getElementById("next").onclick = function () {
            date.setMonth(date.getMonth() + 1);
            add();
        };
    </script>
</body>

</html>